<script>
export default {
  name: "mark-list",
  data() {
    return {
      map: [
        // 工厂企业标注
        // 教育培训标注
        // 酒店旅游标注
        // 微信地图标注
        // 餐饮行业标注
        // 实体门店标注
        // 手机地图标注
        // 汽车导航标注
        // 美容美发标注
        // 水果生鲜标注
        // 休闲娱乐标注
        // 百货超市标注
        {name: '工厂企业标注', img: '/static/images/menu_01.png'},
        {name: '教育培训标注', img: '/static/images/menu_02.png'},
        {name: '酒店旅游标注', img: '/static/images/menu_03.png'},
        {name: '微信地图标注', img: '/static/images/menu_04.png'},
        {name: '餐饮行业标注', img: '/static/images/menu_05.png'},
        {name: '实体门店标注', img: '/static/images/menu_06.png'},
        {name: '手机地图标注', img: '/static/images/menu_07.png'},
        {name: '汽车导航标注', img: '/static/images/menu_08.png'},
        {name: '美容美发标注', img: '/static/images/menu_09.png'},
        {name: '水果生鲜标注', img: '/static/images/menu_10.png'},
        {name: '休闲娱乐标注', img: '/static/images/menu_11.png'},
        {name: '百货超市标注', img: '/static/images/menu_12.png'},
      ]
    }
  }
}
</script>

<template>
  <view>
    <view class="m-title">主流地图覆盖</view>
    <view class="map-list">
      <view class="map-item" v-for="(item, index) in map" :key="index">
        <image class="icon" :src="item.img" mode="aspectFill"></image>
        <view class="name">{{item.name}}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .m-title{
    text-align: center;
    font-size: 36rpx;
    margin-bottom: 40rpx;
    padding-top: 15px;
    font-weight: bold;
  }
  .map-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .map-item{
      width: 200rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      .icon{
        width: 128rpx;
        height: 128rpx;
      }
      .name{
        font-size: 30rpx;
        margin-top: 20rpx;
      }
    }
  }
</style>